<template>
  <view
    class="recommendBox"
    :style="[outModuleCss]"
  >
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="recommendContent">
		
     <view class="headerStyle" v-if="propsData.params.useTitle==1">
     	<view class="title" v-if="propsData.params.useTitle == 1"  :style="[propsData.params.moduleNameCss]">
     	  {{ propsData.params.text }}
     	</view>
		<view @click="goLink"  class="more" :style="[moduleMoreCss]" v-if="propsData.params.showMore == 1 && propsData.params.line==1">
		     <text>{{ propsData.params.moreText }}</text>
			<u-icon name="arrow-right" style="margin-top: 2rpx;"  size="24"></u-icon>
		</view>
     </view>
      <view
        class="toolsList"
        :style="[
          {
            paddingBottom: propsData.params.showStyle == 1 ? '20rpx' : '',
          },
        ]"
      >
        <template v-if="propsData.params.showStyle == 1">
          <!-- <view
            class="toolItem"
            v-if="hasSingleStore && hasOneStoreHideApply == '1'"
            @click.stop="goToAdmin"
			
          >
            <image
              :src="
                has_store > 0
                  ? asyncImgs.my.dianpuguanli
                  : asyncImgs.my.dianpushenqing
              "
              alt=""
            />
            <text>{{ has_store > 0 ? "店铺管理" : "申请店铺" }}</text>
          </view> -->
          <view
		   :style="[customStyle]"
            class="toolItem"
            v-for="(item, index) in getMenuList"
            :key="index"
            @click.stop="chooseItem(item)"
          >
            <image
			:style="[imgStyle]"
              src="https://chidian.chixiaodian.com/web/uploads/images/store_1/2021-10-21/b81e3fdcdd8306e4b3ea6dae70412fd6d21922e4.png"
              alt=""
              v-if="!item.iconUrl || item.iconUrl == ''"
            ></image>
            <image :style="[imgStyle]" :src="item.iconUrl" alt="" v-else></image>
            <text :style="[item.css]">{{ item.name }}</text>
            <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
            <button
              open-type="contact"
              v-if="item.link.link == 'contact'"
              class="contact"
            ></button>
            <!-- #endif -->
          </view>
        </template>
        <template v-if="propsData.params.showStyle == 2">
          <!-- <view
            class="toolItem1"
            v-if="hasSingleStore && hasOneStoreHideApply == '1'"
            @click.stop="goToAdmin"
          >
            <image
              :src="
                has_store > 0
                  ? asyncImgs.my.dianpuguanli
                  : asyncImgs.my.dianpushenqing
              "
              alt=""
            />
            <text>{{ has_store > 0 ? "店铺管理" : "申请店铺" }}</text>
          </view> -->
          <view
            class="toolItem1"
            v-for="(item, index) in propsData.params.list"
            :key="index"
            @click.stop="chooseItem(item)"
          >
            <image
			:style="[imgStyle]"
              src="https://chidian.chixiaodian.com/web/uploads/images/store_1/2021-10-21/b81e3fdcdd8306e4b3ea6dae70412fd6d21922e4.png"
              alt=""
              v-if="!item.iconUrl || item.iconUrl == ''"
            ></image>
            <image :style="[imgStyle]" :src="item.iconUrl" alt="" v-else></image>
            <text :style="[item.css]">{{ item.name }}</text>
            <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
            <button
              open-type="contact"
              v-if="item.link.link == 'contact'"
              class="contact"
            ></button>
            <!-- #endif -->
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import { diySysPageMixin } from "../../mixins/index";
import { storeAdminStoreInfo } from "@/api/admin";

export default {
  name: "listNavigation",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    share_msg: {
      type: null,
      default: null,
    },
    has_store: {
      type: Number,
      default: 0,
    },
  },
  mixins: [diySysPageMixin],
  components: {},
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
	  goLink(){
		  uni.navigateTo({
		  	url:this.propsData.params.link.link
		  })
	  },
    goToAdmin() {
      // #ifdef MP-ALIPAY
      uni.showToast({
        title: "支付宝小程序不支持此次操作，需切换微信小程序～",
        icon: "none",
      });
      return;
      // #endif

      // let userInfo = uni.getStorageSync("userInfo");
      // if (userInfo.is_admin !== '1') {
      // 	uni.showToast({
      // 	  title: '您当前还不是店铺管理员',
      // 	  icon: "none",
      // 	});
      // 	return;
      // }
      if (this.stores.mch_appid == "") {
        uni.showToast({
          title: "商家小程序还未配置",
          icon: "none",
        });
        return;
      }

      uni.navigateToMiniProgram({
        appId: this.stores.mch_appid,
      });
    },

    async getApplyStatus() {
      let applyRes = await this.$allrequest.shareholder.applyStatus();
      if (!applyRes.code) {
        let data = applyRes.data;

        if (data.is_holder) {
          this.$utils.diySkip("/shareholder/shareholder/index");
        } else {
          switch (data.is_apply_holder) {
            case 0:
              // 中间页
              this.$utils.toUrl("/shareholder/shareholder/conditions");
              break;

            case 1:
              this.$utils.toUrl("/shareholder/apply/apply");
              break;

            case 2:
              this.$utils.toUrl("/shareholder/shareholder/index");
              break;
          }
        }
        // if (applyRes.data.status == 1) {
        //   this.$utils.toUrl("/shareholder/shareholder/index");
        // } else {
        //   if (applyRes.data.status == -1) {
        //     this.$utils.diySkip(item.link);
        //     return;
        //   }
        //   this.$utils.toUrl("/shareholder/apply/apply-result");
        // }
      }
    },

    async chooseItem(item) {
      if (!item.link.link) return;

      if (item.link.link === "/videoGoods/userInfo/index") {
        this.$utils.toUrl(`${item.link.link}`);
        return;
      }

      if (item.link.link === "/admin/home/home") {
        storeAdminStoreInfo().then((res) => {
          if (res.data.status === 401) {
            this.$utils.toUrl("/admin/login/login");
          } else {
            this.$utils.toUrl("/admin/home/home");
          }
        });
        return;
        // let userInfo = uni.getStorageSync("userInfo");
        // if(userInfo.is_admin !== '1'){
        //     uni.showToast({
        //     title:this.$t("common.noAdmin"),
        //     icon: "none",
        //   });
        //   return;
        // }
        // uni.switchTab({
        //   url:"/pages/home/home"
        // })
        // return;
      }

      if (item.link.link == "/md_admin/md-center/md") {
        let userInfo = uni.getStorageSync("userInfo");
        if (userInfo.is_md_manager == 1 || userInfo.is_md_staff == 1) {
          this.$utils.diySkip(item.link);
          return;
        } else {
          let applyRes = await this.$allrequest.mdAdmin.applyStatus();
          if (!applyRes.code) {
            if (applyRes.data.status == 1) {
              this.$utils.diySkip(item.link);
            } else {
              if (applyRes.data.status == -1) {
                this.$utils.toUrl("/md_admin/apply-md/apply");
                return;
              }
              this.$utils.toUrl("/md_admin/apply-md/apply-result");
            }
          }
          return;
        }
      }

      if (item.link.link == "/shareholder/apply/apply") {
        let userInfo = uni.getStorageSync("userInfo");
        if (userInfo.is_holder == 1) {
          uni.showToast({
            title: this.$t("diy.noApply"),
            icon: "none",
          });
          return;
        }

        this.getApplyStatus();
        return;
      }
      if (item.link.link == "/shareholder/shareholder/index") {
        let userInfo = uni.getStorageSync("userInfo");
        if (userInfo.is_holder == 1) {
          this.$utils.diySkip(item.link);
          return;
        } else {
          this.getApplyStatus();
          // uni.showToast({
          //   title: this.$t("diy.notShareholder"),
          //   icon: "none",
          // });
          return;
        }
      }

      // if (item.link.link == "/user/share/index") {
      //   if (this.share_msg && this.share_msg.code > 0) {
      //     uni.showToast({
      //       title: this.share_msg.msg,
      //       icon: "none",
      //     });
      //     return;
      //   }
      // }
      this.$utils.diySkip(item.link);
    },
  },

  computed: {
    getMenuList() {
      let list = this.propsData.params.list;

      // #ifdef MP-ALIPAY
      list = list.filter((el) => el.link.open_type !== "contact");
      // #endif
      return list;
    },
	customStyle() {
	  return {
	    width: this.propsData.params.lineNumber == 3 ? '33.33%' :
	           this.propsData.params.lineNumber == 4 ? '25%' :
	           this.propsData.params.lineNumber == 5 ? '20%' : ''
	  };
	},
	    moduleMoreCss(){
	      return this.propsData.params.moduleMoreCss
	    },
	    imgStyle(){
	      return {
	        width: this.propsData.params.width*2+'rpx', 
	        height: this.propsData.params.height*2+'rpx', 
	      }
	    },
	
  },
};
</script>

<style lang="scss" scoped>
	.headerStyle{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  height: 40px;
	}
	.more {
	  display: flex;
	  align-items: center;
	  font-size: 12px;
	  font-weight: 400;
	  color: #888888;
	  margin-bottom: 0;
	  line-height: 1;
	   width: 40px;
	   flex-wrap: nowrap;
	  .iconfont {
	    font-size: 12px;
	    margin-left: 2px;
	    transform: scale(0.8);
	  }
	}
.recommendBox {
  width: 100%;
  position: relative;
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  .recommendContent {
    width: 100%;
    padding: 0 12rpx 0rpx 24rpx;
    .title {
      padding: 20rpx 0;
      font-size: 28rpx;
      font-family: PingFang SC;
      color: #262626;
      font-weight: 600;
	  width: 88%;

    }
    .toolsList {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .toolItem {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20rpx;
        position: relative;
        image {
          width: 50rpx;
          height: 50rpx;
        }
        text {
          font-size: 24rpx;
          color: #242427;
          margin-top: 14rpx;
        }
      }
      .toolItem1 {
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
        image {
          width: 32rpx;
          min-width: 32rpx;
          height: 32rpx;
          margin-right: 24rpx;
        }
        text {
          flex: auto;
          padding: 30rpx 0;
          border-bottom: 1px solid #f1f1f1;
        }
      }
      .contact {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
      }
      .toolItem1:last-child {
        text {
          border-bottom: none;
        }
      }
    }
  }
}
</style>
